<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>商城</title>
		<link rel="stylesheet" href="/Public/Wap/hpf/css/Hpfstyle.css" />
		<link rel="stylesheet" href="/Public/Wap/hpf/css/banner.css" />
		<script type="text/javascript" src="/Public/Wap/hpf/css/iscroll.js"></script>
		<script type="text/javascript" src="/Public/Wap/hpf/css/jQuery.js"></script>
		<style>
		.shopList ul li{position: relative;}
			.shopList ul li a .sc{background:url('/Public/Wap/hpf/images/ico-xin.png') 0 0 no-repeat; -webkit-background-size: auto 100%;background-size: auto 100%; position: absolute; right: 1rem; bottom: 0.6rem; padding-left: 1.3rem; height: 1rem; line-height: 1rem; }

		</style>
	</head>
	<script>
	$(function(){
		var p = 1;
		var cateId = 1;

		function getData(p,cateId)
		{
			$.post("{:U('index_ajax')}", { "p": p , "cateId" : cateId },function(data){
				var str = "";
				if(data.status == 1)
				{
					var od = {};
					for(o in data.info)
					{
						var od = data.info[o];

						str += "<li>";
			  	 		str += '<a href="index.php?s=/Wap/Shop/detail/id/'+data.info[o].id+'">';
			  	 		str += "<img src=\""+data.info[o].pic+"\"/>";
						str += "<label>"+data.info[o].pname+"</label>";
						str += "<span>￥"+data.info[o].price+"</span>";
						str += "<span class=\"sc\">"+data.info[o].collect+"</span>";
						str += "</a>";	
						str += "</li>";
					}
					$(".shopList ul").append(str);
				}else{
				}
			   }, "json");

			/*$.post("{:U('index_ajax')}",{"p":p},function(data){
			  	 	var str = "";
			  	 	alert(data);
			  	 	if(data.status == 1)
			  	 	{
			  	 		str += "<li>";
			  	 		str += "<a>";
			  	 		str += "<img src="+data.pic+"/>";
						str += "<label>"+data.pname+"</label>";
						str += "<span>￥"+data.price+"</span>";
						str += "</a>";	
						str += "</li>";	
						alert(str);
						$(".shopList ul").append(str);
			  	 	}else{

			  	 	}
			},"ajax");*/

		}


		//getData(++p);//加载第一页

		$(".shop .sjsTjtop a").click(function(){
			cateId = $(this).attr("date-cate");
			$(".shop .sjsTjtop li").removeClass("sjsTj");
			$(this).closest("li").addClass("sjsTj");
			$(".shopList ul").text("");
			p=1;
			getData(p,cateId);
		});

		$(".shop .sjsTjtop").find("a:first").trigger("click");//模拟点击第一个

		$(window).scroll( function() {
	          totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     //浏览器的高度加上滚动条的高度
	          if ($(document).height() <= totalheight)     //当文档的高度小于或者等于总的高度的时候，开始动态加载数据
	          {
	              //加载数据
	              //$(".shopList ul").append("我是新加载出来的数据<br/>");
	              getData(++p);
	          }
	     });	
	});

	</script>
	<body>
		<div class="shop">
			<ul class="sjsTjtop">

				<!-- <li class="sjsTj">
					<a><label>剪发</label></a>
				</li> -->
<!-- 				<li>
	<a><label>理发</label></a>
</li>
<li>
	<a><label>美容</label></a>
</li>
<li>
	<a><label>咨询</label></a>
</li> -->
				<foreach name="nav" item="vo">
					<li>
						<a date-cate="{$vo.id}"><label>{$vo.name}</label></a>
					</li>
				</foreach>
			</ul>
			<div class="wraper">
				<header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden;">
					<div id="scroll_pic_view_div" style="width: 3840px; -webkit-transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform-origin: 0px 0px 0px; transform: translate(-1920px, 0px) scale(1) translateZ(0px);">
						<ul id="scroll_pic_view_ul">
							<foreach name="recommend" item="vo">
							<li style="width: 100%;">
								<a href="{:U('Shop/detail',array('id'=>$vo['id']))}">
									<img src="{$vo.pic|get_cover='path'}">
								</a>
							</li>
							</foreach>
						</ul>
					</div>
					<div>
						<ol id="scroll_pic_nav" class="scroll_pic_nav">
							<script>
								(function(d, $){
									var scrollPicView = d.getElementById("scroll_pic_view"),
									scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
									lis = scrollPicViewDiv.querySelectorAll("li"),
									w = scrollPicView.offsetWidth,
									len = lis.length;
									for(var i=0; i<len; i++){
										lis[i].style.width = w+"px";
										if(i == len-1){
											scrollPicViewDiv.style.width = w * len + "px";
										}
									}
				
									var scroll_pic_view = new iScroll('scroll_pic_view', { 
										snap: true,
										momentum: false,
										hScrollbar: false,
										useTransition: true,
										onScrollEnd: function() {
											$("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
											//$("#scroll_pic_nav li.on").prev().addClass("left");
											//$("#scroll_pic_nav li.on").next().removeClass("left");	
											
											var  list=$("#scroll_pic_nav li");
											for(var k=0;k<list.length;k++){
												if(k<this.currPageX)
													$(list[k]).addClass("left");
												else
													$(list[k]).removeClass("left");
											}												
										}
									});
									//
									var nav_lis = new Array(lis.length);
									d.write('<li class="on"><span></span></li>');
									for(var i=1; i<nav_lis.length; i++){										
										d.write("<li><span></span></li>");				
									}
								})(document, $);
							</script>
						</ol>
					</div>
				</header>
			</div>
			<div class="shopList">
				<label>精选商品</label>
				<ul>
					
					<!-- <li>
						<a>
							<img src="../../../../Public/Wap/hpf/images/list1.jpg"/>
							<label>五分钟Hair Studio</label>
							<span>￥258.00</span>
						</a>
					</li>
					
					<li>
						<a>
							<img src="../../../../Public/Wap/hpf/images/list1.jpg"/>
							<label>五分钟Hair Studio</label>
							<span>￥258.00</span>
						</a>
					</li>
					<li>
						<a>
							<img src="../../../../Public/Wap/hpf/images/list1.jpg"/>
							<label>五分钟Hair Studio</label>
							<span>￥258.00</span>
						</a>
					</li> -->

				</ul>
			</div>
		</div>


<style>
.pfex{ position: fixed;width:70%;bottom: 6%;
left: 0%;}
.pfex .pri{position: relative;height: 3rem;padding-left: 1rem;}
.pfex .pri img{height: 100%;}
.pfex .pri .da{position: absolute;height: 100%;width: 80%;left: 0;top: 0; padding-left: 1rem;}
.pfex .pri a{display: inline-block;height: 100%;width: 3.5rem;float: left;}
</style>

<!-- <div class="pfex">
	<div class="pri">
		<img src="Public/Wap/hpf/images/por.png" alt="">
	<div class="da">
		<a href="{:U('Member/card')}"> </a>
		<a href="{:U('Collect/index')}"> </a>
		<a href="{:U('Coupon/index')}"> </a>
	</div>

	</div>
</div> -->

	</body>
</html>